<template>
  <!-- 柱状图组件 -->
  <div id="main" ref="barEchart" class="barEchart" style="width: 100%; height: 100%" />
  <!-- <div id="main" ref="barEchart" class="barEchart" /> -->
</template>
<script>
// import macarons from './macarons'
import * as echarts from 'echarts'
export default {
  name: 'BarEchart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      // 在init 方法内置中有两套主题 light  和dark
      const myChart = this.$echarts.init(this.$refs.barEchart)
      //   绘制图标
      myChart.setOption({
        // 修改线性渐变色方式 1
        color: new echarts.graphic.LinearGradient(
          // (x1,y2) 点到点 (x2,y2) 之间进行渐变
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: '#00fffb' }, // 0 起始颜色
            { offset: 1, color: '#0061ce' } // 1 结束颜色
          ]
        ),

        // 工具提示
        tooltip: {
          // 触发类型  经过轴触发axis  经过轴触发item
          trigger: 'item'
          // 轴触发提示才有效
          // axisPointer: {
          //   // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
          //   type: 'shadow'
          // }
        },
        // 图表边界控制
        grid: {
          top: '3%',
          right: '3%',
          bottom: '3%',
          left: '0%',
          //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
          containLabel: true,
          // 是否显示直角坐标系网格
          show: true,
          // grid 四条边框的颜色
          borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        // 控制x轴
        xAxis: [
          {
            // 使用类目，必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['上海', '广州', '北京', '深圳', '合肥', '杭州', '厦门', '济南', '成都', '重庆'],
            // 刻度设置
            axisTick: {
              // true意思：图形在刻度中间
              // false意思：图形在刻度之间
              alignWithLabel: false,
              // 不显示刻度
              show: false
            },
            // x坐标轴文字标签样式设置
            axisLabel: {
              color: '#4c9bfd'
            },
            // x坐标轴颜色设置
            axisLine: {
              lineStyle: {
                color: 'rgba(0, 240, 255, 0.3)'
                // width:8,  x轴线的粗细
                // opcity: 0,   如果不想显示x轴线 则改为 0
              }
            }
          }
        ],
        // 控制y轴
        yAxis: [
          {
            type: 'value',
            axisTick: {
              alignWithLabel: false,
              // 把y轴的刻度隐藏起来
              show: false
            },
            axisLabel: {
              color: '#4c9bfd'
            },
            // y轴这条线的颜色样式
            axisLine: {
              lineStyle: {
                color: 'rgba(0, 240, 255, 0.3)'
                // width: 3
              }
            },
            // y轴分割线的颜色样式
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 240, 255, 0.3)'
              }
            }
          }
        ],
        // 控制x轴
        series: [
          {
            // 图表数据名称
            name: '用户统计',
            // 图表类型
            type: 'bar',
            // 柱子宽度
            barWidth: '60%',
            // 数据
            data: [2100, 1900, 1700, 1560, 1400, 900, 750, 600, 480, 240]
          }
        ]
      })
      // 监听 window窗口大小变化的事件 自适应
      window.onresize = function() {
        // console.log('屏幕变化了')
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
